{extend name="common/layout" /} {block name="main"}
<t-card class="list-card-container" :bordered="false">
  <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;">
    <div>
      <t-button theme="primary" @click="handleAdd" :disabled="buttonDisabled">
        <template #icon><t-icon name="add" /></template>
        新建
      </t-button>
      <t-button theme="primary" @click="handleAddMore" style="margin-left: 10px" :disabled="buttonDisabled">
        批量新建
      </t-button>
      <t-button theme="primary" @click="handleCheckInMore" style="margin-left: 10px" :disabled="buttonDisabled">
        批量入住
      </t-button>
    </div>
    <div style="display: flex; align-items: center; width: 280px; margin-left: 10px;">
      <div style="flex-grow: 1; margin-right: 5px">
        <t-input v-model="searchValue" placeholder="请输入房间、房号" clearable @enter="handleSearch" />
      </div>
      <t-button theme="primary" @click="handleSearch">
        <template #icon><t-icon name="search" /></template>
      </t-button>
    </div>
    <div style="flex: 1; display: flex; justify-content: center; align-items: center;">
      已租房间: {{numberMessage.rented}}, 空闲房间: {{numberMessage.empty}}, 入住率: {{numberMessage.occupancy}}
    </div>
  </div>

  <t-table :data="tableData" :columns="columns" row-key="id" vertical-align="top" :bordered="true" size="small"
    active-row-type="single" :hover="true" :pagination="pagination" :loading="tableLoading">
    <template #state="{ row }">
      <t-tag v-if="row.rent_mark === 'Y'" theme="danger" variant="light">
        已租
      </t-tag>
      <t-tag v-if="row.rent_mark === 'N'" theme="success" variant="light">
        空闲
      </t-tag>
    </template>
    <template #lease_type="{ row }"> {{row.lease_type}} 个月 </template>
    <template #op="slotProps">
      <t-space>
        <t-button size="small" @click="handleEdit(slotProps.row)">修改</t-button>
        <t-button size="small" theme="success" v-if="slotProps.row.rent_mark === 'N'"
          @click="handleCheckIn(slotProps.row)">入住</t-button>
        <t-button size="small" theme="warning" v-if="slotProps.row.rent_mark === 'Y'"
          @click="handleCheckOut(slotProps.row)">退房</t-button>
        <t-popconfirm theme="danger" content="确认删除?" @confirm="handleDelete(slotProps.row)" :disabled="disable">
          <t-button theme="danger" size="small">删除</t-button>
        </t-popconfirm>
      </t-space>
    </template>
  </t-table>
</t-card>

<!-- 新增房间 -->
<t-dialog v-model:visible="dialogVisible" :header="formHeader" :width="680" :footer="false" top="5px">
  <t-form ref="numberForm" :data="formData" :rules="rules" :label-width="100" @submit="handleSave">
    <t-form-item label="房间名" name="name">
      <t-input v-model="formData.name" :style="{ width: '480px' }" placeholder="请输入" />
    </t-form-item>
    <t-form-item label="房租" name="rental">
      <t-input-number theme="normal" v-model="formData.rental" :style="{ width: '480px' }" placeholder="请输入" />
    </t-form-item>
    <t-form-item label="租期" name="lease_type">
      <t-radio-group v-model="formData.lease_type">
        <t-radio value="1">1个月</t-radio>
        <t-radio value="2">2个月</t-radio>
        <t-radio value="3">3个月</t-radio>
        <t-radio value="6">6个月</t-radio>
        <t-radio value="12">12个月</t-radio>
      </t-radio-group>
    </t-form-item>
    <t-form-item label="押金" name="deposit">
      <t-input-number theme="normal" v-model="formData.deposit" :style="{ width: '480px' }" placeholder="请输入" />
    </t-form-item>
    <t-form-item label="管理费" name="management">
      <t-input-number v-model="formData.management" :style="{ width: '480px' }" theme="normal" placeholder="请输入" />
    </t-form-item>
    <t-form-item label="网络费" name="network">
      <t-input-number v-model="formData.network" :style="{ width: '480px' }" theme="normal" placeholder="请输入" />
    </t-form-item>
    <t-form-item label="卫生费" name="garbage_fee">
      <t-input-number v-model="formData.garbage_fee" :style="{ width: '480px' }" theme="normal" placeholder="请输入" />
    </t-form-item>
    <t-form-item label="逾期日租金" name="daily_rent">
      <t-input-number v-model="formData.daily_rent" :style="{ width: '480px' }" theme="normal" placeholder="请输入" />
    </t-form-item>
    <t-form-item label="水费单价" name="water_price">
      <t-input-number v-model="formData.water_price" :style="{ width: '480px' }" theme="normal" placeholder="请输入" />
    </t-form-item>
    <t-form-item label="电费单价" name="electricity_price">
      <t-input-number v-model="formData.electricity_price" :style="{ width: '480px' }" theme="normal"
        placeholder="请输入" />
    </t-form-item>
    <t-form-item label="水电倍率" name="ratio">
      <t-input-number v-model="formData.ratio" :style="{ width: '480px' }" theme="normal" placeholder="请输入" />
    </t-form-item>
    <t-form-item label="设备" name="equipment">
      <t-textarea v-model="formData.equipment" :style="{ width: '480px' }" placeholder="请输入" autosize />
    </t-form-item>
    <t-form-item style="float: right">
      <t-button variant="outline" @click="dialogVisible = false" style="margin-right: 5px">取消</t-button>
      <t-button theme="primary" type="submit" :disabled="disable">确定</t-button>
    </t-form-item>
  </t-form>
</t-dialog>

<!-- 批量新增房间 -->
<t-dialog v-model:visible="addMoreVisible" :header="formHeader" :width="680" :footer="false" top="5px">
  <t-form v-show="activeForm === 0" ref="addMoreForm1" :data="formData" :rules="rules" :label-width="100"
    @submit="handleNext">
    <t-form-item label="房间数量" name="quantity">
      <t-input-number v-model="formData.quantity" :style="{ width: '480px' }" :min="2" :step="1" :max="10" suffix="间"
        placeholder="请输入" />
    </t-form-item>
    <t-form-item label="房租" name="rental">
      <t-input-number theme="normal" v-model="formData.rental" :style="{ width: '480px' }" placeholder="请输入" />
    </t-form-item>
    <t-form-item label="租期" name="lease_type">
      <t-radio-group v-model="formData.lease_type">
        <t-radio value="1">1个月</t-radio>
        <t-radio value="2">2个月</t-radio>
        <t-radio value="3">3个月</t-radio>
        <t-radio value="6">6个月</t-radio>
        <t-radio value="12">12个月</t-radio>
      </t-radio-group>
    </t-form-item>
    <t-form-item label="押金" name="deposit">
      <t-input-number theme="normal" v-model="formData.deposit" :style="{ width: '480px' }" placeholder="请输入" />
    </t-form-item>
    <t-form-item label="管理费" name="management">
      <t-input-number v-model="formData.management" :style="{ width: '480px' }" theme="normal" placeholder="请输入" />
    </t-form-item>
    <t-form-item label="网络费" name="network">
      <t-input-number v-model="formData.network" :style="{ width: '480px' }" theme="normal" placeholder="请输入" />
    </t-form-item>
    <t-form-item label="卫生费" name="garbage_fee">
      <t-input-number v-model="formData.garbage_fee" :style="{ width: '480px' }" theme="normal" placeholder="请输入" />
    </t-form-item>
    <t-form-item label="逾期日租金" name="daily_rent">
      <t-input-number v-model="formData.daily_rent" :style="{ width: '480px' }" theme="normal" placeholder="请输入" />
    </t-form-item>
    <t-form-item label="水费单价" name="water_price">
      <t-input-number v-model="formData.water_price" :style="{ width: '480px' }" theme="normal" placeholder="请输入" />
    </t-form-item>
    <t-form-item label="电费单价" name="electricity_price">
      <t-input-number v-model="formData.electricity_price" :style="{ width: '480px' }" theme="normal"
        placeholder="请输入" />
    </t-form-item>
    <t-form-item label="水电倍率" name="ratio">
      <t-input-number v-model="formData.ratio" :style="{ width: '480px' }" theme="normal" placeholder="请输入" />
    </t-form-item>
    <t-form-item label="设备" name="equipment">
      <t-textarea v-model="formData.equipment" :style="{ width: '480px' }" placeholder="请输入" autosize />
    </t-form-item>
    <t-form-item style="float: right">
      <t-button variant="outline" @click="addMoreVisible = false" style="margin-right: 5px">取消</t-button>
      <t-button theme="primary" type="submit">下一步</t-button>
    </t-form-item>
  </t-form>
  <!-- 第二部 -->
  <t-form v-show="activeForm === 1" ref="addMoreForm2" :data="numberData" :rules="rules" :label-width="100"
    @submit="handleSaveMore">
    <t-form-item v-for="(item, index) in formData.quantity" :key="index" :label="'房间名' + (index + 1)"
      :name="'name' + index" :prop="'name' + index">
      <t-input v-model="numberData['name' + index]" :style="{ width: '480px' }" placeholder="请输入" />
    </t-form-item>

    <t-form-item style="float: right">
      <t-button variant="outline" @click="handleBack" style="margin-right: 5px">上一步</t-button>
      <t-button theme="primary" type="submit" :disabled="disable">确定</t-button>
    </t-form-item>
  </t-form>
</t-dialog>

<!-- 入住表单 -->
<t-dialog v-model:visible="checkInVisible" :header="formHeader" :width="680" :footer="false">
  <t-form ref="checkInForm" :data="formData" :rules="checkRules" :label-width="100" @submit="checkIn">
    <t-form-item label="房产名" name="house_property_name">
      <t-input v-model="formData.house_property_name" :style="{ width: '480px' }" readonly />
    </t-form-item>
    <t-form-item label="房间名" name="house_number_name">
      <t-input v-model="formData.house_number_name" :style="{ width: '480px' }" readonly />
    </t-form-item>
    <t-form-item label="入住日期" name="checkin_time">
      <t-date-picker v-model="formData.checkin_time" mode="date" :style="{ width: '480px' }" clearable />
    </t-form-item>
    <t-form-item style="float: right">
      <t-button variant="outline" @click="checkInVisible = false" style="margin-right: 5px">取消</t-button>
      <t-button theme="primary" type="submit" :disabled="disable">确定</t-button>
    </t-form-item>
  </t-form>
</t-dialog>

<!-- 退房表单 -->
<t-dialog v-model:visible="checkOutVisible" :header="formHeader" :width="680" :footer="false">
  <t-form ref="checkOutForm" :data="formData" :rules="checkRules" :label-width="100" @submit="checkOut">
    <t-form-item label="房产名" name="house_property_name">
      <t-input v-model="formData.house_property_name" :style="{ width: '480px' }" readonly />
    </t-form-item>
    <t-form-item label="房间名" name="house_number_name">
      <t-input v-model="formData.house_number_name" :style="{ width: '480px' }" readonly />
    </t-form-item>
    <t-form-item label="退房日期" name="leave_time">
      <t-date-picker v-model="formData.leave_time" mode="date" :style="{ width: '480px' }" clearable />
    </t-form-item>
    <t-form-item style="float: right">
      <t-button variant="outline" @click="checkOutVisible = false" style="margin-right: 5px">取消</t-button>
      <t-button theme="primary" type="submit" :disabled="disable">确定</t-button>
    </t-form-item>
  </t-form>
</t-dialog>

<!-- 批量入住 -->
<t-dialog v-model:visible="checkInMoreVisible" :header="formHeader" :width="680" :footer="false" top="5px">
  <t-form ref="checkInMoreForm" :label-width="100" @submit="checkInMoreSave">
    <t-form-item v-for="(domain, index) in unleasedArray" :key="domain.id" :label="domain.name">
      <t-date-picker v-model="domain.checkin_time" mode="date" :style="{ width: '480px' }" clearable />
    </t-form-item>
    <t-form-item style="float: right">
      <t-button variant="outline" @click="checkInMoreVisible = false" style="margin-right: 5px;">取消</t-button>
      <t-button theme="primary" type="submit" :loading="loading">确定</t-button>
    </t-form-item>
  </t-form>
</t-dialog>
{/block} {block name="script"}
<script>
  const data = {
    tableData: [],
    tableLoading: false,
    // 分页
    pagination: {
      defaultPageSize: 10,
      total: 10,
      defaultCurrent: 1,
    },
    columns: [
      {
        title: "房产名",
        colKey: "property_name",
        width: 80,
        align: "left",
        fixed: "left",
      },
      { title: "房间名", colKey: "name", width: 80 },
      { title: "房间状态", colKey: "state", width: 80 },
      { title: "收租日期", colKey: "rent_date", width: 80 },
      { title: "房租", colKey: "rental", width: 80 },
      { title: "押金", colKey: "deposit", width: 80 },
      { title: "租期", colKey: "lease_type", width: 80 },
      { title: "入住日期", colKey: "checkin_time", width: 80 },
      { title: "闲置天数", colKey: "idle", width: 80 },
      {
        title: "操作",
        colKey: "op",
        width: 160,
        align: "left",
        fixed: "right",
      },
    ],
    dialogVisible: false,
    formData: {},
    formHeader: "",
    rules: {
      quantity: [
        { required: true, message: "必填", trigger: "blur" },
        { min: 2, message: "最小值为2", type: "error", trigger: "blur" },
        { max: 10, message: "最大值为10", type: "error", trigger: "blur" },
      ],
      name: [{ required: true, message: "必填", trigger: "blur" }],
      rental: [{ required: true, message: "必填", trigger: "blur" }],
      lease_type: [{ required: true, message: "必填" }],
      deposit: [{ required: true, message: "必填", trigger: "blur" }],
      management: [{ required: true, message: "必填", trigger: "blur" }],
      network: [{ required: true, message: "必填", trigger: "blur" }],
      garbage_fee: [{ required: true, message: "必填", trigger: "blur" }],
      daily_rent: [{ required: true, message: "必填", trigger: "blur" }],
      water_price: [{ required: true, message: "必填", trigger: "blur" }],
      electricity_price: [{ required: true, message: "必填", trigger: "blur" }],
      ratio: [{ required: true, message: "必填", trigger: "blur" }],
      // 使用循环动态生成name0到name7的规则，若未来需要更多，只需调整循环次数
      ...Array.from({ length: 10 }, (_, i) => ({
        [`name${i}`]: [{ required: true, message: "必填", trigger: "blur" }],
      })).reduce((acc, curr) => ({ ...acc, ...curr }), {}),
    },
    // 入住
    checkInVisible: false,
    checkRules: {
      house_property_name: [{ required: true, message: "必填" }],
      house_number_name: [{ required: true, message: "必填" }],
      checkin_time: [{ required: true, message: "必填" }],
      // 退房验证
      leave_time: [{ required: true, message: "必填" }],
    },
    // 退房
    checkOutVisible: false,
    // 搜索
    searchValue: "",
    numberMessage: {},
    // 批量新增
    addMoreVisible: false,
    activeForm: 0,
    numberData: {},
    // 批量入住
    checkInMoreVisible: false,
    unleasedArray: [],
    // 避免重复点击
    disable: false,
  };
  function f() {
    return {
      init: function () {
        this.tableLoading = true;
        axiosGet("{:url('queryNumber')}", { parameter: this.searchValue })
          .then((response) => {
            if (response.code == 1) {
              this.tableData = response.data;
              this.pagination.total = response.count;
            } else {
              this.$message.error("系统出错");
            }
            this.tableLoading = false;
          });
        axiosGet("{:url('getNumberMessage')}")
          .then((response) => {
            if (response.code == 1) {
              this.numberMessage = response.data;
            } else {
              console.log("getMessage error");
            }
          });
      },
      // 查询
      handleSearch() {
        this.init();
      },
      // 新增
      handleAdd() {
        if (!this.houseDef) {
          this.$message.warning("请先新增房产");
        } else {
          this.$refs.numberForm.reset();
          this.formData = {
            house_property_id: this.houseDef,
            management: 0,
            network: 0,
            garbage_fee: 0,
            lease_type: "1",
            ratio: 1,
          };
          this.formHeader = this.houseName + " - 新增房间";
          this.dialogVisible = true;
        }
      },
      // 批量新增
      handleAddMore() {
        if (!this.houseDef) {
          this.$message.warning("请先新增房产");
        } else {
          this.$refs.addMoreForm1.reset();
          this.$refs.addMoreForm2.reset();
          this.formData = {
            house_property_id: this.houseDef,
            quantity: 2,
            management: 0,
            network: 0,
            garbage_fee: 0,
            lease_type: "1",
            ratio: 1,
          };
          this.formHeader = this.houseName + " - 批量新增房间";
          this.activeForm = 0;
          this.addMoreVisible = true;
        }
      },
      // 批量入住
      handleCheckInMore() {
        axiosGet("{:url('queryUnleasedNumber')}", { parameter: this.searchValue })
          .then((response) => {
            if (response.code == 1) {
              this.unleasedArray = response.data;
            } else {
              console.log("queryUnleasedNumber error");
            }
          });
        this.$refs.checkInMoreForm.reset();
        this.formHeader = this.houseName + " - 批量入住";
        this.checkInMoreVisible = true;
      },
      checkInMoreSave() {
        if (!this.unleasedArray.length) {
          this.checkInMoreVisible = false;
          return;
        }
        this.disable = true;
        axiosPost("{:url('checkInMoreSave')}", this.unleasedArray).then(response => {
          if (response.state == 'success') {
            this.$message.success(response.msg);
            this.init();
            this.checkInMoreVisible = false;
          } else if (response.state == 'warning') {
            this.$message.warning(response.msg);
          } else {
            this.$message.error(response.msg);
          }
        }).finally(() => {
          this.disable = false;
        });
      },
      // 修改
      handleEdit(row) {
        this.$refs.numberForm.reset();
        this.formData = { ...row };
        this.formHeader = row.property_name + " - 修改房间";
        this.dialogVisible = true;
      },
      // 保存
      handleSave() {
        this.disable = true;
        this.$refs.numberForm.validate().then((valid) => {
          if (valid == true) {
            axiosPost("{:url('save')}", this.formData).then((response) => {
              if (response.state == "success") {
                this.$message.success(response.msg);
                this.dialogVisible = false;
                this.init();
              } else if (response.state == "warning") {
                this.$message.warning(response.msg);
              } else {
                this.$message.error(response.msg);
              }
            }).finally(() => {
              this.disable = false;
            });
          } else {
            this.disable = false;
          }
        });
      },
      // 批量新增-下一步
      handleNext() {
        this.$refs.addMoreForm1.validate().then((valid) => {
          if (valid == true) {
            for (let i = 0; i < this.formData.quantity; i++) {
              this.numberData["name" + i] = "";
            }
            this.activeForm = 1;
          }
        });
      },
      // 批量新增-上一步
      handleBack() {
        this.activeForm = 0;
      },
      // 批量新增-保存
      handleSaveMore() {
        this.disable = true;
        this.$refs.addMoreForm2.validate().then((valid) => {
          if (valid == true) {
            let sendData = [];
            for (let i = 0; i < this.formData.quantity; i++) {
              let roomData = { ...this.formData };
              roomData["name"] = this.numberData["name" + i];
              sendData.push(roomData);
            }
            axiosPost("{:url('saveMore')}", sendData).then((response) => {
              if (response.state == "success") {
                this.$message.success(response.msg);
                this.addMoreVisible = false;
                this.init();
              } else if (response.state == "warning") {
                this.$message.warning(response.msg);
              } else {
                this.$message.error(response.msg);
              }
            }).finally(() => {
              this.disable = false;
            });
          } else {
            this.disable = false;
          }
        });
      },
      // 删除
      handleDelete(row) {
        if (this.disable) return;
        this.disable = true;
        axiosPost("{:url('delete')}", row).then((response) => {
          if (response.state == "success") {
            this.$message.success(response.msg);
            this.init();
          } else if (response.state == "warning") {
            this.$message.warning(response.msg);
          } else {
            this.$message.error(response.msg);
          }
        }).finally(() => {
          this.disable = false;
        });
      },
      // 入住
      handleCheckIn(row) {
        this.$refs.checkInForm.reset();
        this.formHeader = "租客入住";
        this.checkInVisible = true;
        this.formData = {
          house_property_name: row.property_name,
          house_number_id: row.id,
          house_number_name: row.name,
        };
      },
      checkIn() {
        this.disable = true;
        this.$refs.checkInForm.validate().then((valid) => {
          if (valid == true) {
            axiosPost("{:url('checkin')}", this.formData).then((response) => {
              if (response.state == "success") {
                this.$message.success(response.msg);
                this.checkInVisible = false;
                this.init();
                // location.href = "{:url('house.tenant/index')}";
              } else if (response.state == "warning") {
                this.$message.warning(response.msg);
              } else {
                this.$message.error(response.msg);
              }
            }).finally(() => {
              this.disable = false;
            });
          } else {
            this.disable = false;
          }
        });
      },
      // 退房
      handleCheckOut(row) {
        this.$refs.checkOutForm.reset();
        this.formHeader = "租客退房";
        this.checkOutVisible = true;
        this.formData = {
          id: row.id,
          leave_time: getCurrentDateString(),
          house_number_name: row.name,
          house_property_name: row.property_name,
        };
      },
      checkOut() {
        this.disable = true;
        this.$refs.checkOutForm.validate().then((valid) => {
          if (valid == true) {
            axiosPost("{:url('checkout')}", this.formData).then((response) => {
              if (response.state == "success") {
                this.$message.success(response.msg);
                this.checkOutVisible = false;
                this.init();
              } else if (response.state == "warning") {
                this.$message.warning(response.msg);
              } else {
                this.$message.error(response.msg);
              }
            }).finally(() => {
              this.disable = false;
            });
          } else {
            this.disable = false;
          }
        });
      },
    };
  }
</script>
{/block}